<template>
  <div>
    <div id="dplayer" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
  import DPlayer from 'dplayer';
  import Hls from 'hls.js';

  export default {
    name: "VideoPlayer",
    props: {
      title:String,
      url:String
    },
    data() {
      return {
        player: null
      }
    },
    mounted() {
      this.createPlayer();
    },

    watch: {
      url(val, newVal) {
        this.destroyPlayer();
        this.createPlayer();
      }
    },
    beforeDestroy() {
      this.destroyPlayer();
    },
    methods:{
      destroyPlayer:function () {
        if (this.player) {
          this.player.destroy();
        }
      },
      createPlayer:function () {
        var that = this;
        this.player = new DPlayer({
          container:document.getElementById('dplayer'),
          video:{
            url:that.url,
            type:'customHls',
            customType: {
              customHls: function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
              },
            },
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
